<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  
  <title>图解Http一了解Web及网络服务 | 清风向阳</title>
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  
    <meta name="keywords" content="Joker,Joker's Blog" />
  
  <meta name="description" content="本章所讲解的内容是：Web是建立在什么技术上，以及HTTP的协议是如何诞生的。">
<meta name="keywords" content="HTTP">
<meta property="og:type" content="article">
<meta property="og:title" content="图解Http一了解Web及网络服务">
<meta property="og:url" content="http://mjjde.github.io/2017/04/28/图解Http一了解Web及网络服务/index.html">
<meta property="og:site_name" content="清风向阳">
<meta property="og:description" content="本章所讲解的内容是：Web是建立在什么技术上，以及HTTP的协议是如何诞生的。">
<meta property="og:image" content="http://jokero1o.github.io/images/blog_http_1.png">
<meta property="og:image" content="http://jokero1o.github.io/images/blog_http_2.png">
<meta property="og:updated_time" content="2017-09-15T07:00:05.000Z">
<meta name="twitter:card" content="summary">
<meta name="twitter:title" content="图解Http一了解Web及网络服务">
<meta name="twitter:description" content="本章所讲解的内容是：Web是建立在什么技术上，以及HTTP的协议是如何诞生的。">
<meta name="twitter:image" content="http://jokero1o.github.io/images/blog_http_1.png">
  
  
    <link rel="icon" href="/favicon_pic.ico">
  
  <link href="//cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" type="text/css">
  <link rel="stylesheet" href="/css/style.css">
  <script src="/js/pace.min.js"></script>
  

  
  

</head>

<body>
  <div id="container">
      <header id="header">
    <div id="banner"></div>
    <div id="header-outer">
        <div id="header-menu" class="header-menu-pos animated">
            <div class="header-menu-container">
                <a href="/" class="left">
                    <span class="site-title">Joker&#39;s Blog</span>
                </a>
                <nav id="header-menu-nav" class="right">
                    
                    <a  href="/">
                        <i class="fa fa-home"></i>
                        <span>Home</span>
                    </a>
                    
                    <a  href="/archives">
                        <i class="fa fa-archive"></i>
                        <span>Archives</span>
                    </a>
                    
                    <a  href="/about">
                        <i class="fa fa-user"></i>
                        <span>About</span>
                    </a>
                    
                </nav>
                <a class="mobile-header-menu-button">
                    <i class="fa fa-bars"></i>
                </a>
            </div>
        </div>
        <div id="header-row">
            <div id="logo">
                <a href="/">
                    <img src="/images/avatar.jpg" alt="logo">
                </a>
            </div>
            <div class="header-info">
                <div id="header-title">
                    
                    <h2>
                        Joker&#39;s Blog
                    </h2>
                    
                </div>
                <div id="header-description">
                    
                    <h3>
                        一个认真的技术博客
                    </h3>
                    
                </div>
            </div>
            <nav class="header-nav">
                <div class="social">
                    
                        <a title="Joker"  href="//joker-studio.pub">
                            <i class="fa fa-home fa-2x"></i></a>
                    
                        <a title="Github" target="_blank" href="//github.com/mjjde">
                            <i class="fa fa-github fa-2x"></i></a>
                    
                </div>
            </nav>
        </div>
    </div>
</header>
      <div class="outer">
        <section id="main" class="body-wrap"><article id="post-图解Http一了解Web及网络服务" class="article article-type-post" itemscope itemprop="blogPost">
  <div class="article-inner">
    
      <header class="article-header">
        
  
    <h1 class="post-title" itemprop="name">
      图解Http一了解Web及网络服务
    </h1>
    <div class="post-title-bar">
      <ul>
          
              <li>
                  <i class="fa fa-book"></i>
                  
                      <a href="/categories/网络技术/">网络技术</a>
                  
              </li>
          
        <li>
          <i class="fa fa-calendar"></i>  2017-04-28
        </li>
        <li>
          <i class="fa fa-eye"></i>
          <span id="busuanzi_value_page_pv"></span>
        </li>
      </ul>
    </div>
  

          
      </header>
    
    <div class="article-entry post-content" itemprop="articleBody">
      
            
            <blockquote>
<p>本章所讲解的内容是：Web是建立在什么技术上，以及HTTP的协议是如何诞生的。<br><a id="more"></a></p>
</blockquote>
<h3 id="使用HTTP协议访问Web"><a href="#使用HTTP协议访问Web" class="headerlink" title="使用HTTP协议访问Web"></a><a href="#u4F7F_u7528HTTP_u534F_u8BAE_u8BBF_u95EEWeb" title="使用HTTP协议访问Web"></a>使用HTTP协议访问Web</h3><ol>
<li>根据Web浏览器地址栏中的指定的URL，Web浏览器从Web服务端获取文件资源等信息，从而显示出Web页面。</li>
<li>Web是使用一种名为HTTP的协议作为规范，完成客户端到服务端的一系列动作流程。</li>
<li>协议是指规则的约定，所以Web是建立在HTTP协议上的通信的</li>
</ol>
<h3 id="HTTP诞生"><a href="#HTTP诞生" class="headerlink" title="HTTP诞生"></a><a href="#HTTP_u8BDE_u751F" title="HTTP诞生"></a>HTTP诞生</h3><ol>
<li>1989年3月。这是互联网的黎明期，HTTP诞生</li>
<li>1990年11月，CERN成功研发世界第一台Web服务器和Web浏览器</li>
<li>HTTP 于 1990 年问世。那时的 HTTP 并 有作为正式的标准被建立。 现在的 HTTP 其实含有 HTTP1.0 之前版本的意思，因此被 为 HTTP/0.9</li>
<li>HTTP 正式作为标准被 是在 1996 年的 5 ，版本被 名为 HTTP/1.0，并记 于 RFC1945。 说是初 标准，但该协议标准 今仍 被 使用在服务器端。</li>
<li>1997 年 1 的 HTTP/1.1 是目前主流的 HTTP 协议版本。当初 的标准是 RFC2068，之后发 的修 版 RFC2616 就是当前的最新版本。</li>
</ol>
<h3 id="网络基础TCP-IP"><a href="#网络基础TCP-IP" class="headerlink" title="网络基础TCP/IP"></a><a href="#u7F51_u7EDC_u57FA_u7840TCP/IP" title="网络基础TCP/IP"></a>网络基础TCP/IP</h3><p>我们通常使用的网络是在TCP/IP协议族的基础上进行的，而HTTP是他内部的一个子集。</p>
<h4 id="TCP-IP协议族"><a href="#TCP-IP协议族" class="headerlink" title="TCP/IP协议族"></a><a href="#TCP/IP_u534F_u8BAE_u65CF" title="TCP/IP协议族"></a>TCP/IP协议族</h4><p>把与互联网相关联的协议集合起来总称TCP/IP。也有说法任务TCP/IP是指TCP和IP两种协议，或是在IP协议的通信过程中使用到的协议族的统称。</p>
<h4 id="TCP-IP的分层管理"><a href="#TCP-IP的分层管理" class="headerlink" title="TCP/IP的分层管理"></a><a href="#TCP/IP_u7684_u5206_u5C42_u7BA1_u7406" title="TCP/IP的分层管理"></a>TCP/IP的分层管理</h4><p>TCP/IP分为应用层,传输层，网络层,数据链路层。</p>
<h5 id="应用层"><a href="#应用层" class="headerlink" title="应用层"></a><a href="#u5E94_u7528_u5C42" title="应用层"></a>应用层</h5><p>应用层决定了向用户提供应用服务通信的活动，比如DNS,FTP,HTTP等</p>
<h5 id="传输层"><a href="#传输层" class="headerlink" title="传输层"></a><a href="#u4F20_u8F93_u5C42" title="传输层"></a>传输层</h5><p>传输层对上层应用层，提供处于网络连接中的两太计算机之间的数据传输，在传输层有两个不同的协议，一个是TCP一个是UDP</p>
<h5 id="网络层"><a href="#网络层" class="headerlink" title="网络层"></a><a href="#u7F51_u7EDC_u5C42" title="网络层"></a>网络层</h5><p>网络层是用来处理网络上流动的数据包。数据包是网络传输的最小单位，该层规定了通过怎么样的路径（传输路径）来到达对方的计算机。并把数据包传送给对方。<br>在对方计算机之间通过多台计算机或者网络设备进行传输时，该层提供了在众多选项内的一条传输路线。</p>
<h5 id="链路层"><a href="#链路层" class="headerlink" title="链路层"></a><a href="#u94FE_u8DEF_u5C42" title="链路层"></a>链路层</h5><p>用来处理连接网络的硬件部分。包括控制系统，硬件的驱动，网卡，光纤等可见的硬件设备，硬件上的范畴都是属于链路层的作用范围。</p>
<h4 id="TCP-IP通信传输流"><a href="#TCP-IP通信传输流" class="headerlink" title="TCP/IP通信传输流"></a><a href="#TCP/IP_u901A_u4FE1_u4F20_u8F93_u6D41" title="TCP/IP通信传输流"></a>TCP/IP通信传输流</h4><p><img src="http://jokero1o.github.io/images/blog_http_1.png" alt=""><br>web客户端发送一次请求，使用HTTP协议，经过传输层，为了传输方便TCP协议将数据进行分割，并在各个报文上打上标记序号和端口号发送给网络层，网络层接收到一个个报文后增加作为通信目标的MAC地址后转发给 链路层，这样客户端侧的网络请求就发送完毕了。<br>服务器接受端在链路层接受到了数据再按顺序往上层发送，一直到应用层，当到达应用层后，服务端算是收到了一次HTTP网络请求。<br><img src="http://jokero1o.github.io/images/blog_http_2.png" alt=""><br>发送端每经过一层都必定会打上一个该层的首部信息，反之，接收端都会在每个层级上把对于的首部消去</p>
<h3 id="与HTTP关系密切的协议：IP，TCP-DNS"><a href="#与HTTP关系密切的协议：IP，TCP-DNS" class="headerlink" title="与HTTP关系密切的协议：IP，TCP,DNS"></a><a href="#u4E0EHTTP_u5173_u7CFB_u5BC6_u5207_u7684_u534F_u8BAE_uFF1AIP_uFF0CTCP_2CDNS" title="与HTTP关系密切的协议：IP，TCP,DNS"></a>与HTTP关系密切的协议：IP，TCP,DNS</h3><h4 id="负责传输的IP协议"><a href="#负责传输的IP协议" class="headerlink" title="负责传输的IP协议"></a><a href="#u8D1F_u8D23_u4F20_u8F93_u7684IP_u534F_u8BAE" title="负责传输的IP协议"></a>负责传输的IP协议</h4><p>IP协议的作用是要把数据传输给接收端，而要保证数据能够正确的传输到对方那里是需要具备各类条件的，其中两个重要的条件是IP地址和MAC地址<br>IP地址是指名了节点被分配的地址，MAC地址是指网卡所属的固定地址，IP地址可变，MAC地址一般不会变。</p>
<h5 id="使用ARP协议凭借MAC地址进行通信"><a href="#使用ARP协议凭借MAC地址进行通信" class="headerlink" title="使用ARP协议凭借MAC地址进行通信"></a><a href="#u4F7F_u7528ARP_u534F_u8BAE_u51ED_u501FMAC_u5730_u5740_u8FDB_u884C_u901A_u4FE1" title="使用ARP协议凭借MAC地址进行通信"></a>使用ARP协议凭借MAC地址进行通信</h5><p>IP间的通信依赖MAC地址，但是IP通信经常需要计算机或者网络设备来中转，这个时候利用计算机或网络设备的MAC地址来查询到下一个中转目标。只时候我们需要使用ARP协议来根据通信方的IP来查询对应的MAC地址。</p>
<h4 id="确保可靠性的TCP"><a href="#确保可靠性的TCP" class="headerlink" title="确保可靠性的TCP"></a><a href="#u786E_u4FDD_u53EF_u9760_u6027_u7684TCP" title="确保可靠性的TCP"></a>确保可靠性的TCP</h4><p>TCP协议提供可靠的字节流服务，字节流服务是指将大块的数据包分割成小块的报文的数据包进行管理，可靠是指能将将数据准确可靠的传输给对方。</p>
<h5 id="确保数据的可靠性"><a href="#确保数据的可靠性" class="headerlink" title="确保数据的可靠性"></a><a href="#u786E_u4FDD_u6570_u636E_u7684_u53EF_u9760_u6027" title="确保数据的可靠性"></a>确保数据的可靠性</h5><p>TCP会进行三次握手来确保数据传输的可靠性。发送端首先会发送一次标有SYN的数据包，服务端接受到后发送一个标记SYN/ACK的数据包，发送端再发送一个标记ACK的数据包</p>
<h5 id="负责域名解析的DNS服务"><a href="#负责域名解析的DNS服务" class="headerlink" title="负责域名解析的DNS服务"></a><a href="#u8D1F_u8D23_u57DF_u540D_u89E3_u6790_u7684DNS_u670D_u52A1" title="负责域名解析的DNS服务"></a>负责域名解析的DNS服务</h5><p>DNS和HTTP协议一样是属于应用层的协议，DNS提供域名查找IP地址，IP地址反查域名。</p>

            <div class="post-copyright">
    <div class="content">
        <p>最后更新： 2017年09月15日 15:00</p>
        <p>原始链接： <a class="post-url" href="/2017/04/28/图解Http一了解Web及网络服务/" title="图解Http一了解Web及网络服务">http://mjjde.github.io/2017/04/28/图解Http一了解Web及网络服务/</a></p>
        <footer>
            <a href="http://mjjde.github.io">
                <img src="/images/avatar.jpg" alt="Joker Mei">
                Joker Mei
            </a>
        </footer>
    </div>
</div>

      
    </div>
    <footer class="article-footer">
        
        
<div class="post-share">
    <a href="javascript:;" id="share-sub" class="post-share-fab">
        <i class="fa fa-share-alt"></i>
    </a>
    <div class="post-share-list" id="share-list">
        <ul class="share-icons">
          <li>
            <a class="weibo share-sns" target="_blank" href="http://service.weibo.com/share/share.php?url=http://mjjde.github.io/2017/04/28/图解Http一了解Web及网络服务/&title=《图解Http一了解Web及网络服务》 — 清风向阳&pic=http://mjjde.github.ioimages/avatar.jpg" data-title="微博">
              <i class="fa fa-weibo"></i>
            </a>
          </li>
          <li>
            <a class="weixin share-sns" id="wxFab" href="javascript:;" data-title="微信">
              <i class="fa fa-weixin"></i>
            </a>
          </li>
          <li>
            <a class="qq share-sns" target="_blank" href="http://connect.qq.com/widget/shareqq/index.html?url=http://mjjde.github.io/2017/04/28/图解Http一了解Web及网络服务/&title=《图解Http一了解Web及网络服务》 — 清风向阳&source=
本章所讲解的内容是：Web是建立在什么技术上，以及HTTP的协议是如何诞生的。" data-title="QQ">
              <i class="fa fa-qq"></i>
            </a>
          </li>
          <li>
            <a class="facebook share-sns" target="_blank" href="https://www.facebook.com/sharer/sharer.php?u=http://mjjde.github.io/2017/04/28/图解Http一了解Web及网络服务/" data-title="Facebook">
              <i class="fa fa-facebook"></i>
            </a>
          </li>
          <li>
            <a class="twitter share-sns" target="_blank" href="https://twitter.com/intent/tweet?text=《图解Http一了解Web及网络服务》 — 清风向阳&url=http://mjjde.github.io/2017/04/28/图解Http一了解Web及网络服务/&via=http://mjjde.github.io" data-title="Twitter">
              <i class="fa fa-twitter"></i>
            </a>
          </li>
          <li>
            <a class="google share-sns" target="_blank" href="https://plus.google.com/share?url=http://mjjde.github.io/2017/04/28/图解Http一了解Web及网络服务/" data-title="Google+">
              <i class="fa fa-google-plus"></i>
            </a>
          </li>
        </ul>
     </div>
</div>
<div class="post-modal wx-share" id="wxShare">
    <a class="close" href="javascript:;" id="wxShare-close">×</a>
    <p>扫一扫，分享到微信</p>
    <img src="//api.qrserver.com/v1/create-qr-code/?data=http://mjjde.github.io/2017/04/28/图解Http一了解Web及网络服务/" alt="微信分享二维码">
</div>

<div class="mask"></div>

        
        <ul class="article-footer-menu">
            
            
  <li class="article-footer-tags">
    <i class="fa fa-tags"></i>
      
    <a href="/tags/HTTP/" class="color5">HTTP</a>
      
  </li>

        </ul>
        
    </footer>
  </div>
</article>


    <aside class="post-toc-pos post-toc-top" id="post-toc">
        <nav class="post-toc-wrap">
            <ol class="post-toc"><li class="post-toc-item post-toc-level-3"><a class="post-toc-link" href="#使用HTTP协议访问Web"><span class="post-toc-text">使用HTTP协议访问Web</span></a></li><li class="post-toc-item post-toc-level-3"><a class="post-toc-link" href="#HTTP诞生"><span class="post-toc-text">HTTP诞生</span></a></li><li class="post-toc-item post-toc-level-3"><a class="post-toc-link" href="#网络基础TCP-IP"><span class="post-toc-text">网络基础TCP/IP</span></a><ol class="post-toc-child"><li class="post-toc-item post-toc-level-4"><a class="post-toc-link" href="#TCP-IP协议族"><span class="post-toc-text">TCP/IP协议族</span></a></li><li class="post-toc-item post-toc-level-4"><a class="post-toc-link" href="#TCP-IP的分层管理"><span class="post-toc-text">TCP/IP的分层管理</span></a><ol class="post-toc-child"><li class="post-toc-item post-toc-level-5"><a class="post-toc-link" href="#应用层"><span class="post-toc-text">应用层</span></a></li><li class="post-toc-item post-toc-level-5"><a class="post-toc-link" href="#传输层"><span class="post-toc-text">传输层</span></a></li><li class="post-toc-item post-toc-level-5"><a class="post-toc-link" href="#网络层"><span class="post-toc-text">网络层</span></a></li><li class="post-toc-item post-toc-level-5"><a class="post-toc-link" href="#链路层"><span class="post-toc-text">链路层</span></a></li></ol></li><li class="post-toc-item post-toc-level-4"><a class="post-toc-link" href="#TCP-IP通信传输流"><span class="post-toc-text">TCP/IP通信传输流</span></a></li></ol></li><li class="post-toc-item post-toc-level-3"><a class="post-toc-link" href="#与HTTP关系密切的协议：IP，TCP-DNS"><span class="post-toc-text">与HTTP关系密切的协议：IP，TCP,DNS</span></a><ol class="post-toc-child"><li class="post-toc-item post-toc-level-4"><a class="post-toc-link" href="#负责传输的IP协议"><span class="post-toc-text">负责传输的IP协议</span></a><ol class="post-toc-child"><li class="post-toc-item post-toc-level-5"><a class="post-toc-link" href="#使用ARP协议凭借MAC地址进行通信"><span class="post-toc-text">使用ARP协议凭借MAC地址进行通信</span></a></li></ol></li><li class="post-toc-item post-toc-level-4"><a class="post-toc-link" href="#确保可靠性的TCP"><span class="post-toc-text">确保可靠性的TCP</span></a><ol class="post-toc-child"><li class="post-toc-item post-toc-level-5"><a class="post-toc-link" href="#确保数据的可靠性"><span class="post-toc-text">确保数据的可靠性</span></a></li><li class="post-toc-item post-toc-level-5"><a class="post-toc-link" href="#负责域名解析的DNS服务"><span class="post-toc-text">负责域名解析的DNS服务</span></a></li></ol></li></ol></li></ol>
        </nav>
    </aside>
    

<nav id="article-nav">
  
    <a href="/2017/04/29/图解Http三HTTP报文内的HTTP信息/" id="article-nav-newer" class="article-nav-link-wrap">

      <span class="article-nav-title">
        <i class="fa fa-hand-o-left" aria-hidden="true"></i>
        
          图解Http三HTTP报文内的HTTP信息
        
      </span>
    </a>
  
  
    <a href="/2017/04/28/图解Http二简单的HTTP协议/" id="article-nav-older" class="article-nav-link-wrap">
      <span class="article-nav-title">图解Http二简单的HTTP协议</span>
      <i class="fa fa-hand-o-right" aria-hidden="true"></i>
    </a>
  
</nav>



    
</section>
        
      </div>
      <footer id="footer">
  <div class="outer">
    <div id="footer-info" class="inner">
      
<p>
    <span id="busuanzi_container_site_uv" style='display:none'>
        总访客数：<span id="busuanzi_value_site_uv"></span>
    </span>
    <span id="busuanzi_container_site_pv" style='display:none'>
        总访问量：<span id="busuanzi_value_site_pv"></span>
    </span>
</p>


      <p>
        Powered by  <a href="http://hexo.io/" target="_blank">Hexo</a>
        Theme <a href="//github.com/wongminho/hexo-theme-miho" target="_blank">MiHo</a>
      &copy; 2018 Joker Mei<br>
      </p>
    </div>
  </div>
</footer>
    <script async src="//dn-lbstatics.qbox.me/busuanzi/2.3/busuanzi.pure.mini.js"></script>
<script src="//cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
<script>
  var mihoConfig = {
      root: "http://mjjde.github.io",
      animate: false,
      isHome: false,
      share: true
  }
</script>
<div class="sidebar">
    <!-- <div id="sidebar-search" title="Search">
        <i class="fa fa-search"></i>
    </div> -->
    <div id="sidebar-category" title="Categories">
        <i class="fa fa-book"></i>
    </div>
    <div id="sidebar-tag" title="Tags">
        <i class="fa fa-tags"></i>
    </div>
    <div id="sidebar-top">
        <span class="sidebar-top-icon"><i class="fa fa-angle-up"></i></span>
    </div>
</div>
<div class="sidebar-menu-box" id="sidebar-menu-box">
    <div class="sidebar-menu-box-container">
        <div id="sidebar-menu-box-categories">
            <a class="category-link" href="/categories/Android技术/">Android技术</a><a class="category-link" href="/categories/其他技术/">其他技术</a><a class="category-link" href="/categories/网络技术/">网络技术</a><a class="category-link" href="/categories/设计模式/">设计模式</a>
        </div>
        <div id="sidebar-menu-box-tags">
            <a href="/tags/Activity/" style="font-size: 10px;">Activity</a> <a href="/tags/Android/" style="font-size: 16px;">Android</a> <a href="/tags/Android-IPC/" style="font-size: 10px;">Android-IPC</a> <a href="/tags/Binder/" style="font-size: 16px;">Binder</a> <a href="/tags/DiskLruCache/" style="font-size: 10px;">DiskLruCache</a> <a href="/tags/Fragment/" style="font-size: 10px;">Fragment</a> <a href="/tags/HTTP/" style="font-size: 20px;">HTTP</a> <a href="/tags/Java/" style="font-size: 10px;">Java</a> <a href="/tags/Notification/" style="font-size: 10px;">Notification</a> <a href="/tags/RemoteView/" style="font-size: 10px;">RemoteView</a> <a href="/tags/Rxjava/" style="font-size: 14px;">Rxjava</a> <a href="/tags/ServiceManager/" style="font-size: 14px;">ServiceManager</a> <a href="/tags/android/" style="font-size: 12px;">android</a> <a href="/tags/gradle/" style="font-size: 10px;">gradle</a> <a href="/tags/java/" style="font-size: 18px;">java</a> <a href="/tags/other/" style="font-size: 10px;">other</a> <a href="/tags/volley/" style="font-size: 12px;">volley</a> <a href="/tags/widget/" style="font-size: 10px;">widget</a> <a href="/tags/事件/" style="font-size: 10px;">事件</a> <a href="/tags/组件化/" style="font-size: 10px;">组件化</a> <a href="/tags/设计模式/" style="font-size: 18px;">设计模式</a>
        </div>
    </div>
    <a href="javascript:;" class="sidebar-menu-box-close">&times;</a>
</div>
<div class="mobile-header-menu-nav" id="mobile-header-menu-nav">
    <div id="mobile-header-menu-container">
        <span class="title">Menu</span>
        <ul class="mobile-header-menu-navbar">
            
            <li>
                <a  href="/">
                    <i class="fa fa-home"></i><span>Home</span>
                </a>
            </li>
            
            <li>
                <a  href="/archives">
                    <i class="fa fa-archive"></i><span>Archives</span>
                </a>
            </li>
            
            <li>
                <a  href="/about">
                    <i class="fa fa-user"></i><span>About</span>
                </a>
            </li>
            
        </ul>
    </div>
</div>
<div class="search-wrap">
    <span class="search-close">&times;</span>
        <a href="javascript:;" class="header-icon waves-effect waves-circle waves-light" id="back">
            <i class="icon icon-lg icon-chevron-left"></i>
        </a>
        <input class="search-field" placeholder="Search..." id="keywords">
        <a id="search-submit" href="javascript:;">
            <i class="fa fa-search"></i>
        </a>
    <div class="search-container" id="search-container">
        <ul class="search-result" id="search-result">
        </ul>
    </div>
</div>

<div id="search-tpl">
    <li class="search-result-item">
        <a href="{url}" class="search-item-li">
            <span class="search-item-li-title" title="{title}">{title}</span>
        </a>
    </li>
</div>
<script src="/js/search.js"></script>
<script src="/js/main.js"></script>








  </div>
</body>
</html>